<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信同步助手 - 控制台错误捕获</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            line-height: 1.6;
        }
        .log {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            max-height: 500px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
            white-space: pre-wrap;
        }
        .error { color: #dc3545; }
        .warning { color: #ffc107; }
        .info { color: #17a2b8; }
        .success { color: #28a745; }
    </style>
</head>
<body>
    <h1>微信同步助手 - 控制台错误捕获</h1>
    <p>这个页面会捕获并显示JavaScript控制台中的错误信息。</p>
    
    <h2>控制台日志</h2>
    <div id="console-log" class="log"></div>
    
    <h2>加载扩展程序脚本</h2>
    <button onclick="loadPopupScript()">加载popup.js</button>
    <button onclick="loadBackgroundScript()">加载background.js</button>
    <button onclick="loadAllScripts()">加载所有脚本</button>
    
    <script>
        const consoleLog = document.getElementById('console-log');
        
        // 捕获控制台错误
        window.onerror = function(msg, url, lineNo, columnNo, error) {
            const message = `错误: ${msg}\n位置: ${url}:${lineNo}:${columnNo}`;
            addLog(message, 'error');
            return false;
        };
        
        // 捕获控制台日志
        const originalConsole = {
            log: console.log,
            error: console.error,
            warn: console.warn,
            info: console.info
        };
        
        console.log = function(...args) {
            originalConsole.log.apply(console, args);
            addLog('LOG: ' + args.join(' '), 'info');
        };
        
        console.error = function(...args) {
            originalConsole.error.apply(console, args);
            addLog('ERROR: ' + args.join(' '), 'error');
        };
        
        console.warn = function(...args) {
            originalConsole.warn.apply(console, args);
            addLog('WARN: ' + args.join(' '), 'warning');
        };
        
        console.info = function(...args) {
            originalConsole.info.apply(console, args);
            addLog('INFO: ' + args.join(' '), 'info');
        };
        
        function addLog(message, type = 'info') {
            const timestamp = new Date().toLocaleTimeString();
            const logEntry = document.createElement('div');
            logEntry.innerHTML = `<span style="color: #666;">[${timestamp}]</span> <span class="${type}">${message}</span>`;
            consoleLog.appendChild(logEntry);
            consoleLog.scrollTop = consoleLog.scrollHeight;
        }
        
        function loadPopupScript() {
            addLog('开始加载popup.js...', 'info');
            const script = document.createElement('script');
            script.src = './dist/popup.js';
            script.onload = function() {
                addLog('popup.js加载成功', 'success');
            };
            script.onerror = function() {
                addLog('popup.js加载失败', 'error');
            };
            document.head.appendChild(script);
        }
        
        function loadBackgroundScript() {
            addLog('开始加载background.js...', 'info');
            const script = document.createElement('script');
            script.src = './dist/background.js';
            script.onload = function() {
                addLog('background.js加载成功', 'success');
            };
            script.onerror = function() {
                addLog('background.js加载失败', 'error');
            };
            document.head.appendChild(script);
        }
        
        function loadAllScripts() {
            loadPopupScript();
            setTimeout(loadBackgroundScript, 1000);
        }
        
        // 页面加载时自动捕获错误
        addLog('页面加载完成，开始捕获控制台错误...', 'info');
        
        // 测试一些基本功能
        setTimeout(() => {
            addLog('测试Chrome API...', 'info');
            if (typeof chrome !== 'undefined') {
                addLog('Chrome API可用', 'success');
                if (chrome.runtime) {
                    addLog('chrome.runtime可用', 'success');
                } else {
                    addLog('chrome.runtime不可用', 'error');
                }
            } else {
                addLog('Chrome API不可用（正常，不在扩展环境中）', 'warning');
            }
        }, 500);
    </script>
</body>
</html>